<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>客户生命周期分析</title>
  <!-- 引入Element Plus的CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.3.6/dist/index.css" />
  <!-- 引入图标库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css">
  <!-- 引入echarts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
  <style>
    :root {
      --primary-color: #3a36db;
      --secondary-color: #00c9ff;
      --accent-color: #00ffb3;
      --dark-bg: #0a0b1a;
      --card-bg: #13142a;
      --text-color: #e0e0ff;
      --border-color: #2a2a57;
      --hover-color: #2d2d69;
      --gradient-primary: linear-gradient(135deg, #3a36db, #00c9ff);
      --gradient-secondary: linear-gradient(135deg, #00c9ff, #00ffb3);
      --box-shadow: 0 8px 32px rgba(0, 201, 255, 0.1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Roboto', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    body {
      background-color: var(--dark-bg);
      color: var(--text-color);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* 导航栏样式 */
    .navbar {
      background-color: var(--card-bg);
      padding: 0.8rem 2rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      position: sticky;
      top: 0;
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-color);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .logo-icon {
      width: 40px;
      height: 40px;
      background: var(--gradient-primary);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
      box-shadow: 0 4px 15px rgba(58, 54, 219, 0.3);
    }

    .logo-text {
      font-size: 1.2rem;
      font-weight: 600;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .nav-items {
      display: flex;
      gap: 2.5rem;
    }

    .nav-item {
      list-style: none;
      position: relative;
    }

    .nav-link {
      color: var(--text-color);
      text-decoration: none;
      font-size: 1rem;
      font-weight: 500;
      padding: 0.5rem 0;
      transition: all 0.3s ease;
    }

    .nav-link.active {
      color: var(--secondary-color);
      font-weight: 600;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--gradient-secondary);
      border-radius: 3px;
    }

    .nav-link:hover {
      color: var(--secondary-color);
    }

    .user-profile {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--gradient-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dark-bg);
      font-weight: bold;
    }

    /* 内容区域样式 */
    .container {
      padding: 2rem;
      max-width: 1600px;
      margin: 0 auto;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
    }

    .title {
      font-size: 1.8rem;
      font-weight: 700;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .refresh-btn {
      background: var(--gradient-primary);
      color: white;
      border: none;
      padding: 0.6rem 1.2rem;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(58, 54, 219, 0.3);
    }

    .refresh-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(58, 54, 219, 0.4);
    }

    /* 数据卡片组 */
    .stats-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .stat-card {
      background-color: var(--card-bg);
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: var(--box-shadow);
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(0, 201, 255, 0.15);
      border-color: var(--secondary-color);
    }

    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background: radial-gradient(circle at top right, rgba(0, 201, 255, 0.1), transparent 70%);
      border-radius: 50%;
    }

    .stat-icon {
      font-size: 1.5rem;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      margin-bottom: 1rem;
      background: rgba(58, 54, 219, 0.1);
      color: var(--secondary-color);
    }

    .stat-value {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      background: var(--gradient-secondary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .stat-label {
      font-size: 1rem;
      color: rgba(224, 224, 255, 0.8);
    }

    .stat-change {
      margin-top: 0.5rem;
      font-size: 0.875rem;
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }

    .positive {
      color: var(--accent-color);
    }

    .negative {
      color: #ff6b6b;
    }

    /* 图表区域 */
    .charts-section {
      margin-bottom: 2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    .chart-card {
      background-color: var(--card-bg);
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: var(--box-shadow);
      border: 1px solid var(--border-color);
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .chart-title {
      font-size: 1.2rem;
      font-weight: 600;
    }

    .chart-container {
      height: 350px;
      width: 100%;
    }

    .full-width {
      grid-column: 1 / -1;
    }

    /* 表格区域 */
    .table-section {
      background-color: var(--card-bg);
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: var(--box-shadow);
      border: 1px solid var(--border-color);
    }

    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .table-title {
      font-size: 1.2rem;
      font-weight: 600;
    }

    .search-box {
      position: relative;
    }

    .search-input {
      background-color: rgba(42, 42, 87, 0.4);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 0.5rem 1rem 0.5rem 2.5rem;
      color: var(--text-color);
      width: 250px;
    }

    .search-input:focus {
      outline: none;
      border-color: var(--secondary-color);
      box-shadow: 0 0 0 3px rgba(0, 201, 255, 0.1);
    }

    .search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(224, 224, 255, 0.6);
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
    }

    .data-table th,
    .data-table td {
      padding: 1rem;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
    }

    .data-table th {
      background-color: rgba(42, 42, 87, 0.4);
      font-weight: 600;
      color: var(--secondary-color);
    }

    .data-table tbody tr {
      transition: all 0.3s ease;
    }

    .data-table tbody tr:hover {
      background-color: var(--hover-color);
    }

    .tag {
      padding: 0.3rem 0.8rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 600;
      display: inline-block;
    }

    .tag-success {
      background-color: rgba(0, 255, 179, 0.15);
      color: var(--accent-color);
    }

    .tag-warning {
      background-color: rgba(255, 184, 0, 0.15);
      color: #ffb800;
    }

    .tag-danger {
      background-color: rgba(255, 107, 107, 0.15);
      color: #ff6b6b;
    }

    .tag-info {
      background-color: rgba(0, 201, 255, 0.15);
      color: var(--secondary-color);
    }

    .tag-purple {
      background-color: rgba(145, 85, 253, 0.15);
      color: #9155fd;
    }

    /* 生命周期流程图 */
    .lifecycle-flow {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2rem;
      position: relative;
    }

    .lifecycle-flow::before {
      content: '';
      position: absolute;
      top: 40px;
      left: 10%;
      right: 10%;
      height: 4px;
      background: var(--gradient-primary);
      z-index: 0;
    }

    .lifecycle-stage {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;
    }

    .stage-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: var(--card-bg);
      border: 4px solid var(--primary-color);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      font-size: 1.8rem;
      color: var(--secondary-color);
      box-shadow: 0 0 20px rgba(0, 201, 255, 0.2);
    }

    .stage-name {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .stage-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--accent-color);
    }

    /* 分页样式 */
    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 1.5rem;
      gap: 0.5rem;
    }

    .page-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background-color: rgba(42, 42, 87, 0.4);
      border: 1px solid var(--border-color);
      color: var(--text-color);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .page-btn:hover {
      background-color: var(--hover-color);
      border-color: var(--secondary-color);
    }

    .page-btn.active {
      background: var(--gradient-primary);
      color: white;
      border: none;
    }

    /* 响应式设计 */
    @media (max-width: 1200px) {
      .stats-cards {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .charts-section {
        grid-template-columns: 1fr;
      }

      .lifecycle-flow {
        flex-wrap: wrap;
      }

      .lifecycle-flow::before {
        display: none;
      }

      .lifecycle-stage {
        width: 45%;
        margin-bottom: 2rem;
      }
    }

    @media (max-width: 768px) {
      .navbar {
        padding: 0.8rem 1rem;
        flex-direction: column;
        gap: 1rem;
      }
      
      .nav-items {
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
      }
      
      .stats-cards {
        grid-template-columns: 1fr;
      }
      
      .container {
        padding: 1rem;
      }

      .lifecycle-stage {
        width: 100%;
      }
    }
  </style>
</head>
<body>

  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="logo">
      <div class="logo-icon">
        <i class="fas fa-chart-pie"></i>
      </div>
      <div class="logo-text">NEWBE工作室</div>
    </div>
    
    <ul class="nav-items">
      <li class="nav-item">
        <a href="#" class="nav-link">RFM客户行为分析</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link active">客户生命周期</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">营销活动分析</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">销售预测</a>
      </li>
    </ul>
    
    <div class="user-profile">
      <div class="user-avatar">A</div>
    </div>
  </nav>

  <!-- 主要内容区域 -->
  <div class="container">
    <!-- 标题和刷新按钮 -->
    <div class="header">
      <h1 class="title">客户生命周期分析</h1>
      <button class="refresh-btn">
        <i class="fas fa-sync-alt"></i>
        生成分析
      </button>
    </div>
    
    <!-- 生命周期流程图 -->
    <div class="lifecycle-flow">
      <div class="lifecycle-stage">
        <div class="stage-icon">
          <i class="fas fa-user-plus"></i>
        </div>
        <div class="stage-name">获取</div>
        <div class="stage-value">568</div>
      </div>
      
      <div class="lifecycle-stage">
        <div class="stage-icon">
          <i class="fas fa-rocket"></i>
        </div>
        <div class="stage-name">激活</div>
        <div class="stage-value">423</div>
      </div>
      
      <div class="lifecycle-stage">
        <div class="stage-icon">
          <i class="fas fa-sync-alt"></i>
        </div>
        <div class="stage-name">保留</div>
        <div class="stage-value">325</div>
      </div>
      
      <div class="lifecycle-stage">
        <div class="stage-icon">
          <i class="fas fa-shopping-cart"></i>
        </div>
        <div class="stage-name">转化</div>
        <div class="stage-value">238</div>
      </div>
      
      <div class="lifecycle-stage">
        <div class="stage-icon">
          <i class="fas fa-bullhorn"></i>
        </div>
        <div class="stage-name">推荐</div>
        <div class="stage-value">156</div>
      </div>
    </div>
    
    <!-- 数据统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-handshake"></i>
        </div>
        <div class="stat-value">¥24,680</div>
        <div class="stat-label">客户获取成本</div>
        <div class="stat-change positive">
          <i class="fas fa-arrow-down"></i>
          6.3% 较上月
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-yen-sign"></i>
        </div>
        <div class="stat-value">¥86,500</div>
        <div class="stat-label">客户终身价值</div>
        <div class="stat-change positive">
          <i class="fas fa-arrow-up"></i>
          8.2% 较上月
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-chart-line"></i>
        </div>
        <div class="stat-value">74.5%</div>
        <div class="stat-label">客户留存率</div>
        <div class="stat-change positive">
          <i class="fas fa-arrow-up"></i>
          3.1% 较上月
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-value">28%</div>
        <div class="stat-label">客户流失率</div>
        <div class="stat-change negative">
          <i class="fas fa-arrow-up"></i>
          1.5% 较上月
        </div>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-section">
      <!-- 客户生命周期漏斗图表 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3 class="chart-title">客户生命周期漏斗</h3>
        </div>
        <div class="chart-container" id="lifecycleFunnelChart"></div>
      </div>
      
      <!-- 客户留存率图表 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3 class="chart-title">客户留存率趋势</h3>
        </div>
        <div class="chart-container" id="retentionRateChart"></div>
      </div>
      
      <!-- 客户转化路径图表 -->
      <div class="chart-card full-width">
        <div class="chart-header">
          <h3 class="chart-title">客户转化路径分析</h3>
        </div>
        <div class="chart-container" id="conversionPathChart"></div>
      </div>
    </div>
    
    <!-- 客户生命周期分析表格 -->
    <div class="table-section">
      <div class="table-header">
        <h3 class="table-title">客户生命周期分析详情</h3>
        <div class="search-box">
          <i class="fas fa-search search-icon"></i>
          <input type="text" class="search-input" placeholder="搜索客户">
        </div>
      </div>
      
      <table class="data-table">
        <thead>
          <tr>
            <th>客户名称</th>
            <th>当前阶段</th>
            <th>在此阶段时长</th>
            <th>活跃度</th>
            <th>近期互动</th>
            <th>客户价值</th>
            <th>生命周期预测</th>
            <th>流失风险</th>
            <th>推荐操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>北京智能科技有限公司</td>
            <td><span class="tag tag-success">保留</span></td>
            <td>186 天</td>
            <td>高</td>
            <td>2 天前</td>
            <td>¥186,500</td>
            <td>预计持续2年</td>
            <td><span class="tag tag-info">低风险</span></td>
            <td><span class="tag tag-purple">升级产品</span></td>
          </tr>
          <tr>
            <td>上海数字信息技术有限公司</td>
            <td><span class="tag tag-info">激活</span></td>
            <td>32 天</td>
            <td>中</td>
            <td>5 天前</td>
            <td>¥52,300</td>
            <td>预计持续1年</td>
            <td><span class="tag tag-warning">中风险</span></td>
            <td><span class="tag tag-info">提供培训</span></td>
          </tr>
          <tr>
            <td>广州网络科技有限公司</td>
            <td><span class="tag tag-purple">转化</span></td>
            <td>68 天</td>
            <td>高</td>
            <td>1 天前</td>
            <td>¥78,200</td>
            <td>预计持续1.5年</td>
            <td><span class="tag tag-info">低风险</span></td>
            <td><span class="tag tag-success">交叉销售</span></td>
          </tr>
          <tr>
            <td>深圳电子有限公司</td>
            <td><span class="tag tag-success">保留</span></td>
            <td>125 天</td>
            <td>低</td>
            <td>15 天前</td>
            <td>¥31,500</td>
            <td>预计持续6个月</td>
            <td><span class="tag tag-danger">高风险</span></td>
            <td><span class="tag tag-warning">客户挽留</span></td>
          </tr>
          <tr>
            <td>杭州软件开发有限公司</td>
            <td><span class="tag tag-warning">推荐</span></td>
            <td>45 天</td>
            <td>中</td>
            <td>8 天前</td>
            <td>¥95,800</td>
            <td>预计持续2年</td>
            <td><span class="tag tag-warning">中风险</span></td>
            <td><span class="tag tag-purple">奖励推荐</span></td>
          </tr>
        </tbody>
      </table>
      
      <div class="pagination">
        <button class="page-btn"><i class="fas fa-angle-left"></i></button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">3</button>
        <button class="page-btn">...</button>
        <button class="page-btn">8</button>
        <button class="page-btn"><i class="fas fa-angle-right"></i></button>
      </div>
    </div>
  </div>

  <script>
    // 初始化图表
    document.addEventListener('DOMContentLoaded', function() {
      // 客户生命周期漏斗图表
      const lifecycleFunnelChart = echarts.init(document.getElementById('lifecycleFunnelChart'));
      
      const lifecycleFunnelOption = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#3a36db', '#5653ea', '#00c9ff', '#00ffb3', '#ffb800'],
        series: [
          {
            name: '客户生命周期',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#13142a',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 568, name: '获取 (568)' },
              { value: 423, name: '激活 (423)' },
              { value: 325, name: '保留 (325)' },
              { value: 238, name: '转化 (238)' },
              { value: 156, name: '推荐 (156)' }
            ]
          }
        ]
      };
      
      lifecycleFunnelChart.setOption(lifecycleFunnelOption);
      
      // 客户留存率图表
      const retentionRateChart = echarts.init(document.getElementById('retentionRateChart'));
      
      const retentionRateOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: {
            lineStyle: {
              color: '#2a2a57'
            }
          },
          axisLabel: {
            color: '#e0e0ff'
          }
        },
        yAxis: {
          type: 'value',
          name: '留存率(%)',
          min: 0,
          max: 100,
          axisLine: {
            lineStyle: {
              color: '#2a2a57'
            }
          },
          axisLabel: {
            color: '#e0e0ff'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(42, 42, 87, 0.4)'
            }
          }
        },
        series: [
          {
            name: '1月队列',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              width: 3
            },
            symbolSize: 8,
            itemStyle: {
              color: '#3a36db'
            },
            data: [100, 85, 76, 68, 65, 62]
          },
          {
            name: '2月队列',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              width: 3
            },
            symbolSize: 8,
            itemStyle: {
              color: '#00c9ff'
            },
            data: [null, 100, 82, 74, 70, 67]
          },
          {
            name: '3月队列',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              width: 3
            },
            symbolSize: 8,
            itemStyle: {
              color: '#00ffb3'
            },
            data: [null, null, 100, 84, 76, 72]
          },
          {
            name: '4月队列',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              width: 3
            },
            symbolSize: 8,
            itemStyle: {
              color: '#ffb800'
            },
            data: [null, null, null, 100, 86, 78]
          },
          {
            name: '5月队列',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              width: 3
            },
            symbolSize: 8,
            itemStyle: {
              color: '#ff6b6b'
            },
            data: [null, null, null, null, 100, 87]
          }
        ]
      };
      
      retentionRateChart.setOption(retentionRateOption);
      
      // 客户转化路径图表
      const conversionPathChart = echarts.init(document.getElementById('conversionPathChart'));
      
      const conversionPathOption = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'sankey',
            left: '10%',
            right: '10%',
            emphasis: {
              focus: 'adjacency'
            },
            data: [
              { name: '流量来源' },
              { name: '搜索引擎' },
              { name: '社交媒体' },
              { name: '直接访问' },
              { name: '推荐' },
              { name: '首次接触' },
              { name: '内容浏览' },
              { name: '产品查询' },
              { name: '咨询' },
              { name: '试用' },
              { name: '转化' },
              { name: '复购' },
              { name: '推荐他人' }
            ],
            links: [
              { source: '流量来源', target: '搜索引擎', value: 350 },
              { source: '流量来源', target: '社交媒体', value: 230 },
              { source: '流量来源', target: '直接访问', value: 180 },
              { source: '流量来源', target: '推荐', value: 120 },
              { source: '搜索引擎', target: '首次接触', value: 320 },
              { source: '社交媒体', target: '首次接触', value: 210 },
              { source: '直接访问', target: '首次接触', value: 170 },
              { source: '推荐', target: '首次接触', value: 110 },
              { source: '首次接触', target: '内容浏览', value: 680 },
              { source: '内容浏览', target: '产品查询', value: 520 },
              { source: '产品查询', target: '咨询', value: 380 },
              { source: '咨询', target: '试用', value: 270 },
              { source: '试用', target: '转化', value: 180 },
              { source: '转化', target: '复购', value: 120 },
              { source: '复购', target: '推荐他人', value: 85 }
            ],
            lineStyle: {
              color: 'gradient',
              curveness: 0.5
            },
            itemStyle: {
              color: function(params) {
                const colors = ['#3a36db', '#5653ea', '#8884ff', '#00c9ff', '#00ffb3', '#ffb800', '#ff6b6b'];
                return colors[params.dataIndex % colors.length];
              }
            },
            label: {
              color: '#e0e0ff'
            }
          }
        ]
      };
      
      conversionPathChart.setOption(conversionPathOption);
      
      // 响应窗口大小变化，重绘图表
      window.addEventListener('resize', function() {
        lifecycleFunnelChart.resize();
        retentionRateChart.resize();
        conversionPathChart.resize();
      });
    });
  </script>
</body>
</html>
